<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Ai | DarkWhite</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/prettyPhoto.css" rel="stylesheet">
	<link href="css/item_hover.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <link href="fonts/stylesheet.css" rel="stylesheet">
    <link href="css/responsive.css" rel="stylesheet">
    
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->       
    <link rel="shortcut icon" href="images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
    <style>
        .viewed-courses-img{
         position: relative;
         transition: all .5s; 
        }
        .viewed-courses-img:hover{
         transform: scale(1.1);    /*鼠标悬停时执行变形：缩放为1.1倍大小*/
        }
    </style>
</head><!--/head-->
<body>
    <header id="main_header">
   
          
    </header><!--/header-->
    <!-- 轮播广告 -->
    <div class="container">
        <div class="carousel slide"  data-ride="carousel"  id="eduCarousel">
            <!-- 轮播广告内容 -->
            <div class="carousel-inner">
              <!-- 此处应填充为动态数据 -->
                
              
            </div>
            <!-- 翻页控制器 -->
            <a class="carousel-control left" href="#eduCarousel" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="carousel-control right" href="#eduCarousel" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
            <!-- 广告分页器 -->
        </div>
      </div>
  
            

    <section id="recent-works" class="shortcode-item">
        <div class="container">
            <h2>课程列表</h2>
            <div id="lesson" class="row">
                <!-- 此处填充动态数据 -->
                
            </div>
            <div id="lesson1" class="row">
                <!-- 此处填充动态数据 -->
                
            </div>
            <div id="lesson2" class="row">
                <!-- 此处填充动态数据 -->
                
            </div>
            <div id="lesson3" class="row">
                <!-- 此处填充动态数据 -->
                
            </div>


        </div>
    </section><!--/#portfolio-->

    <section id="bottom">
        <div id="bottom2" class="container wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
           
        </div>
    </section>

    <footer id="footer" class="midnight-blue">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    &copy; 2019 All Rights Reserved.
                </div>
                <div class="col-sm-6">
                    <ul class="pull-right">
                        <li><a href="index.html">首页</a></li>
                        <li><a href="about-us.html">关于我们</a></li>
                        <li><a href="404.html">常见问题</a></li>
                        <li><a href="contact-us.html">联系我们</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
    

    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.prettyPhoto.js"></script>
    <script src="js/jquery.isotope.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="js/scripts.min.js"></script>
    <script src="js/main.min.js"></script>
    <script>
      $(window).load(function(){
        $.ajax({
          method:'GET',
          url:'http://127.0.0.1:5050/ai',
          success:function(data){
             //1.处理轮播广告的动态数据
             console.log('异步请求成功')
             let html = ''   //即将要放到轮播广告内的动态内容
          for(let i in data.carouselItems){ //根据动态数据创建HTML字符串
            html += `
              <div class="item ${i==0 ? 'active' : ''}">
                <img style="width:100%" src="${data.carouselItems[i].img}">
              </div>
            `
          }
          $('.carousel .carousel-inner').html(html)
          
          //2.处理商品列表动态数据
          let data1 = data.productItems
          let htmllesson = ''
          for(let i=0;i<data1.length;i++){
            htmllesson +=`
            <div class="col-xs-12 col-sm-3 col-md-3">
                <!-- .viewed-courses-box -->
                <div class="viewed-courses-box">
                    <div class="viewed-courses-img">
                        <a href="/single.html?lid=${data1[i].lid}">
                        <img src="images/lang/courses-img${i+1}.jpg" alt="coureses-img1">
                        </a>
                    </div>
                    <div class="viewed-courses-text">
                        <a href="/single.html?lid=${data1[i].lid}">        
                                <h6>${data1[i].details}</h6>
                        </a>
                        <p>By : ${data1[i].teacher_name}</p>
                        <div class="star">
                            <i class="fa fa-star" aria-hidden="true"></i>
                            <i class="fa fa-star" aria-hidden="true"></i>
                            <i class="fa fa-star" aria-hidden="true"></i>
                            <i class="fa fa-star" aria-hidden="true"></i>
                            <i class="fa fa-star-o" aria-hidden="true"></i>
                        </div>
                        <div class="price">
                            ￥${data1[i].price} 
                        </div>
                     </div>
                </div>
             <!-- /.viewed-courses-box -->
            </div>
            `
            }
            $('#lesson').html(htmllesson)
            $('#lesson1').html(htmllesson)
            $('#lesson2').html(htmllesson)
            $('#lesson3').html(htmllesson)
          }


        })
      })
    </script>
</body>
</html>
